<script setup lang="ts">

</script>

<template>
  <div class="carousel">
    <el-carousel v-bind="$attrs">
      <el-carousel-item>
        <img src="@/assets/images/banner3.png"/>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/banner1.png"/>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/banner4.png"/>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/banner2.jpg"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.carousel {
  padding-top: 10px;

  :deep(.el-carousel) {
    height: 400px;
    border-radius: 20px;

    .el-carousel__container {
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
